<template>
    <div>
        <section class="">
            <ul class="form">
                <li class="form-item">
                    <span class="form-title">姓名</span>
                    <input
                        class="form-input"
                        type="text"
                        placeholder="请输入姓名"
                        v-model="addressInfo.name"
                    >
                </li>
                <li class="form-item">
                    <span class="form-title">联系方式</span>
                    <input
                        class="form-input"
                        type="tel"
                        maxlength="11"
                        onkeypress="return event.keyCode>=48&&event.keyCode<=57"
                        ng-pattern="/[^a-zA-Z]/"
                        placeholder="请输入11位手机号码"
                        v-model="addressInfo.phone"
                    >
                </li>
                <li class="form-item" @click="showDistrictChoice=true">
                    <span class="form-title">所在地区</span>
                    <span class="form-input">{{addressDetail}}</span>
                    <van-icon name="arrow" class="form-arrow"/>
                </li>
                <li class="form-item form-item-textarea">
                    <span class="form-title">详细地址</span>
                    <textarea
                        class="form-textarea"
                        name=""
                        rows=""
                        cols=""
                        placeholder="街道门牌信息"
                        v-model="addressInfo.detail"
                    ></textarea>
                </li>
                <li class="form-item" v-if="len>1&&editAddress">
                    <span class="form-title">默认地址</span>
                    <van-switch v-model="editAddress.isDefault" active-color="#F03726"/>
                </li>
            </ul>
            <div class="btn-box ptb10">
                <van-button class="btn" size="large" @click="judge(1)" v-if="editAddress">保存</van-button>
                <van-button class="btn" size="large" @click="judge(0)" v-else>新增</van-button>
            </div>
        </section>
        <address-selector
            :api="apiHeader"
            ref="district"
            v-model="showDistrictChoice"
            @on-choice="onChoiceDistrict"
            @on-cancel
        ></address-selector>
    </div>
</template>
<script>
import AddressSelector from "../../components/Selector";

export default {
    data() {
        return {
            showDistrictChoice: false,
            addressInfo: {
                name: "",
                phone: "",
                area1: "",
                area2: "",
                area3: "",
                detail: ""
            },
            addressDetail: "",
            editAddress: "",
            editAddressDetail: "",
            apiHeader: "",
            checked: true,
            len: 0
        };
    },
    components: { AddressSelector },
    watch: {
        "editAddress.isDefault": function() {
            this.setDefaultAddress();
        }
    },
    mounted() {
        this.getAddressList();
        this.apiHeader = window._config.api + "/area.lists?pid=";
        if (this.$route.query.info) this.getEditAddress();
    },
    methods: {
        //编辑地址
        getEditAddress() {
            this.editAddress = JSON.parse(this.$route.query.info);
            console.log(this.editAddress);
            this.addressInfo.name = this.editAddress.name;
            this.addressInfo.phone = this.editAddress.phone;
            this.addressInfo.area1 = this.editAddress.area1;
            this.addressInfo.area2 = this.editAddress.area2;
            this.addressInfo.area3 = this.editAddress.area3;
            this.addressDetail = this.editAddress.addr;
            let tmp = this.editAddress.detail;
            let a = tmp.split(" ");
            this.addressInfo.detail = a[a.length - 1];
        },
        //获取地址列表
        getAddressList() {
            this.$store.dispatch(types.GET_ADDRESS_LIST).then(res => {
                console.log(res);
                if (res.code !== 0) return;
                this.len = res.items.length;
            });
        },
        //设置默认地址
        setDefaultAddress() {
            console.log(this.editAddress);
            this.$store
                .dispatch(types.ADDRESS_DEFAULT, { id: this.editAddress.id })
                .then(res => {
                    console.log(res);
                });
        },
        onChoiceDistrict(choice, id, name) {
            this.addressInfo.a1 = id[0] ? id[0] : "";
            this.addressInfo.a2 = id[1] ? id[1] : 0;
            this.addressInfo.a3 = id[2] ? id[1] : 0;
            this.addressDetail = name.join(" ");
        },
        judge(id) {
            let tel = /^[1]{1}[3,5,7,8]{1}[0-9]{9}$/;
            if (this.addressInfo.name == "") return this.fail("请输入姓名");
            if (this.addressInfo.phone == "")
                return this.fail("请输入电话号码");
            if (!tel.test(this.addressInfo.phone))
                return this.fail("手机号码格式不正确");
            if (this.addressInfo.a1 == "") return this.fail("请输入地址");
            if (this.addressInfo.detail == "")
                return this.fail("请输入详细地址");
            if (id) return this.edit();
            this.submit();
        },
        //新增
        submit() {
            this.addressInfo.detail =
                this.addressDetail + " " + this.addressInfo.detail;
            this.$store
                .dispatch(types.ADDRESS_ADD, this.addressInfo)
                .then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.success("新增成功");
                        this.$router.go(-1);
                    } else {
                        this.fail("新增失败");
                    }
                });
        },
        //编辑
        edit() {
            this.addressInfo.detail =
                this.addressDetail + " " + this.addressInfo.detail;
            this.addressInfo.id = this.editAddress.id;
            this.$store
                .dispatch(types.ADDRESS_EDIT, this.addressInfo)
                .then(res => {
                    if (res.code === 0) {
                        this.success("修改成功");
                        this.$router.go(-1);
                    } else {
                        this.fail("修改失败");
                    }
                });
        }
    }
};
</script>
<style scoped lang="scss">
</style>